<template>
  <div class="page ">
    <!-- <el-form :inline="true" v-if="searchVisible" class="query-form m-b-10" ref="searchForm" :model="searchForm" @keyup.enter="refreshList()" @submit.prevent>
  
      <el-form-item>
        <el-button type="primary" @click="refreshList()" icon="search">查询</el-button>
        <el-button type="default" @click="resetSearch()" icon="refresh-right">重置</el-button>
      </el-form-item>
    </el-form> -->
    <div class="page-header">
      <div class="page-title">招标信息</div>
      <el-button type="primary" plain size="small" icon="el-icon-back" @click="returnToProjectDetails" v-if="this.$route.query.purchaseId">退出</el-button>
    </div>
    
    <div class="jp-table">
      <vxe-toolbar ref="purchaseTenderToolbar" :refresh="{query: refreshList}" import export print custom>
        <template #buttons v-if="this.$route.query.purchaseId">
          <el-button v-if="hasPermission('tender:purchaseTender:add')" type="primary" icon="plus" @click="add()">新建</el-button>
          <el-button v-if="hasPermission('tender:purchaseTender:edit')" type="warning" icon="edit-filled" @click="edit()"
            v-show="$refs.purchaseTenderTable && $refs.purchaseTenderTable.getCheckboxRecords().length === 1" plain>修改</el-button>
          <el-button v-if="hasPermission('tender:purchaseTender:del')" type="danger" icon="del-filled" @click="del()"
            v-show="$refs.purchaseTenderTable && $refs.purchaseTenderTable.getCheckboxRecords().length > 0" plain>删除</el-button>
        </template>
        <template #tools>
          <vxe-button type="text" :title="
					searchVisible ? '收起检索' : '展开检索'
				" icon="vxe-icon-search" class="tool-btn" @click="searchVisible = !searchVisible"></vxe-button>
          <vxe-button type="text" title="下载导入模板" v-if="hasPermission('tender:purchaseTender:import')" icon="vxe-button--icon vxe-icon-file-excel"
            class="tool-btn m-l-0" @click="downloadTpl()">
          </vxe-button>
        </template>
      </vxe-toolbar>
      <div class="jp-table-body">
        <vxe-table border="inner" auto-resize resizable height="600" :loading="loading" size="small" ref="purchaseTenderTable" show-header-overflow   
          show-overflow highlight-hover-row :menu-config="{}" :print-config="{}" :import-config="{
		importMethod: importMethod,
		types: ['csv', 'xls', 'xlsx'],
		remote: true,
	}" :export-config="{
		remote: true,
		filename: `采购招标数据${moment(new Date()).format(
			'YYYY-MM-DD'
		)}`,
		sheetName: '采购招标数据',
		exportMethod: exportMethod,
		types: ['xlsx'],
		modes: ['current', 'selected', 'all'],
	}" @sort-change="sortChangeHandle" :expand-config="{accordion: true, lazy: true,loadMethod:detail}" :sort-config="{remote:true}" :data="dataList"
          :checkbox-config="{}">
          <vxe-column type="seq" width="40"></vxe-column>
          <vxe-column type="checkbox" width="40px"></vxe-column>
          <vxe-column type="expand" width="80">
            <template #content="{ row }">
              <el-tabs class="child-tab">
                <el-tab-pane label="报名情况(报名单位名称)">
                  <el-table :data="row.purchaseTenderFirmDTOList" class="child-table" border>
                    <el-table-column prop="company.companyName" align="center" header-align="center" label="报名单位">
                    </el-table-column>
                    <el-table-column prop="contactPerson" show-overflow-tooltip align="center" header-align="center" label="联系人">
                    </el-table-column>
                    <el-table-column prop="contactPhone" show-overflow-tooltip align="center" header-align="center" label="联系电话">
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </template>
          </vxe-column>
          <vxe-column field="purchase.purchaseName" sortable title="招采项目名称">
           
          </vxe-column>
          
          <vxe-column field="section" sortable title="标段划分">
          </vxe-column>
          <vxe-column field="orgForm" sortable title="招标组织形式">
            <template #default="{ row }">
              {{ $dictUtils.getDictLabel("org_form", orgForm, '-') }}
            </template>
          </vxe-column>
          <!-- <vxe-column field="purchaseWay" sortable title="招标（采购）方式">
            <template #default="{ row }">
              {{ $dictUtils.getDictLabel("procurement_method", purchaseWay, '-') }}
            </template>
          </vxe-column> -->
          <vxe-column field="tenderType" sortable title="采购方式">         
            <template #default="{ row }">
              {{ $dictUtils.getDictLabel("procurement_method", row.tenderType, '-') }}
            </template>
          </vxe-column>
          <vxe-column field="budgetAmount" sortable title="预算金额（万元）">
          </vxe-column>
         
          <vxe-column field="tenderNoticeTime" sortable title="公告发布时间">
          </vxe-column>
          <vxe-column field="openBidTime" sortable title="开标时间">
          </vxe-column>
          <vxe-column field="winBidCompany.companyName" sortable title="中标单位">
          </vxe-column>
          <vxe-column field="status" sortable title="中标情况">
            <template #default="{ row }">
              {{ $dictUtils.getDictLabel("tender_status", row.status, '-') }}
            </template>
          </vxe-column>
          <vxe-column field="winBidAmount" sortable title="中标金额(万元)">
          </vxe-column>
        
          
          
          
          <!-- <vxe-column field="tenderNotice" sortable title="招标公告">
            <template #default="{ row }">
              <template v-if="row.tenderNotice">
                <el-link type="primary" class="m-r-10" :href="item" target="_blank" :key="index" v-for="(item, index) in row.tenderNotice.split(',')">
                  {{decodeURIComponent(item.substring(item.lastIndexOf("&name=")+6))}}</el-link>
              </template>
            </template>
          </vxe-column> -->
          <!-- <vxe-column field="winBidTime" sortable title="中标时间">
          </vxe-column>
          <vxe-column field="winBidNotice" sortable title="中标通知书信息">
            <template #default="{ row }">
              <template v-if="row.winBidNotice">
                <el-link type="primary" class="m-r-10" :href="item" target="_blank" :key="index" v-for="(item, index) in row.winBidNotice.split(',')">
                  {{decodeURIComponent(item.substring(item.lastIndexOf("&name=")+6))}}</el-link>
              </template>
            </template>
          </vxe-column> -->
          <vxe-column fixed="right" align="center" width="200" title="操作">
            <template #default="{ row }">
              <el-button v-if="hasPermission('tender:purchaseTender:view')" type="primary" text icon="view-filled" @click="view(row.id)">查看</el-button>
              <el-button v-if="hasPermission('tender:purchaseTender:edit')" type="primary" text icon="edit-filled" @click="edit(row.id)">修改</el-button>
              <el-button v-if="hasPermission('tender:purchaseTender:del')" type="danger" text icon="del-filled" @click="del(row.id)">删除</el-button>
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-pager background size="small" :current-page="tablePage.currentPage" :page-size="tablePage.pageSize" :total="tablePage.total"
          :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
          @page-change="currentChangeHandle">
        </vxe-pager>
      </div>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <PurchaseTenderForm ref="purchaseTenderForm" @refreshDataList="refreshList"></PurchaseTenderForm>
  </div>
</template>

<script>
import PurchaseTenderForm from './PurchaseTenderForm'
import purchaseTenderService from '@/api/tender/purchaseTenderService'
export default {

  data() {
    return {
      searchVisible: true,
      searchForm: {contract:{id:""},project:{id:""},purchase:{id:""},purchaseWay:""
      },
      dataList: [],
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        orders: [{ column: "a.create_time", asc: false }],
      },
      loading: false,
      purchaseWay:'',
      orgForm:""
    }
  },
  components: {
    PurchaseTenderForm
  },
  created() {
    // this.searchForm.contract.id = this.contractId;
    this.searchForm.project.id= this.$route.query.projectId;
    this.searchForm.purchase.id= this.$route.query.purchaseId;
   this.searchForm.purchaseWay= this.$route.query.purchaseWay;
   this.orgForm= this.$route.query.orgForm;
  },
  mounted() {
    this.$nextTick(() => {
      // 将表格和工具栏进行关联
      const $table = this.$refs.purchaseTenderTable
      const $toolbar = this.$refs.purchaseTenderToolbar
      $table.connect($toolbar)
    })
  },
  activated() {
    this.refreshList()
  },
  methods: {
    // 获取数据列表
    refreshList() {
      this.loading = true
      purchaseTenderService.list({
        'current': this.tablePage.currentPage,
        'size': this.tablePage.pageSize,
        'orders': this.tablePage.orders,
        ...this.searchForm
      }).then((data) => {
        this.dataList = data.records
        this.tablePage.total = data.total
        this.loading = false
      })
    },
    // 当前页
    currentChangeHandle({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.refreshList()
    },
    // 排序
    sortChangeHandle(obj) {
      this.tablePage.orders = [];
      if (obj.order != null) {
        this.tablePage.orders = [{ column: obj.column.sortBy || this.$utils.toLine(obj.property), asc: obj.order === "asc" }];
      } else {
        this.tablePage.orders = [{ column: "a.create_time", asc: false }];
      }
      this.refreshList();
    },
    // 新增
    add() {
      this.$refs.purchaseTenderForm.init('add', { contract: { id: this.contractId }, purchase: { id: this.$route.query.purchaseId}, project: { id: this.$route.query.projectId},tenderType:this.$route.query.purchaseWay })
    },
    // 修改
    edit(id) {
      id = id || this.$refs.purchaseTenderTable.getCheckboxRecords().map(item => {
        return item.id
      })[0]
      this.$refs.purchaseTenderForm.init('edit', id)
    },
    // 查看
    view(id) {
      this.$refs.purchaseTenderForm.init('view', id)
    },
    // 删除
    del(id) {
      let ids = id || this.$refs.purchaseTenderTable.getCheckboxRecords().map(item => {
        return item.id
      }).join(',')
      this.$confirm(`确定删除所选项吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        purchaseTenderService.delete(ids).then((data) => {
          this.$message.success(data)
          this.refreshList()
          this.loading = false
        })
      })
    },
    // 查看详情
    detail({ row }) {
      return new Promise(resolve => {
        purchaseTenderService.queryById(row.id).then((data) => {
          this.dataList.forEach((item) => {
            if (item.id === row.id) {
              item.purchaseTenderFirmDTOList = data.purchaseTenderFirmDTOList
            }
          })
          resolve()
        })
      })
    },
    // 下载模板
    downloadTpl() {
      this.loading = true
      purchaseTenderService
        .exportTemplate()
        .then((data) => {
          // 将二进制流文件写入excel表，以下为重要步骤
          this.$utils.downloadExcel(data, "采购招标导入模板");
          this.loading = false
        })
        .catch(function (err) {
          this.loading = false
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    // 自定义服务端导入
    importMethod({ file }) {
      // 处理表单
      const formBody = new FormData();
      formBody.append("file", file);
      this.loading = true
      purchaseTenderService.importExcel(formBody).then((result) => {
        this.$message.success({
          dangerouslyUseHTMLString: true,
          message: result,
        });
        this.refreshList();
      });
    },
    // 自定义服务端导出
    exportMethod({ options }) {
      // 传给服务端的参数
      const params = {
        current: this.tablePage.currentPage,
        size: this.tablePage.pageSize,
        orders: this.tablePage.orders,
        ...this.searchForm,
        filename: options.filename,
        sheetName: options.sheetName,
        isHeader: options.isHeader,
        original: options.original,
        mode: options.mode,
        selectIds:
          options.mode === "selected"
            ? options.data.map((item) => item.id)
            : [],
        exportFields: options.columns.map(
          (column) => column.property && column.property.split(".")[0]
        ),
      };
      this.loading = true;
      return purchaseTenderService
        .exportExcel(params)
        .then((data) => {
          // 将二进制流文件写入excel表，以下为重要步骤
          this.$utils.downloadExcel(data, options.filename);
          this.loading = false;
        })
        .catch(function (err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    resetSearch() {
      this.$refs.searchForm.resetFields()
      this.refreshList()
    },returnToProjectDetails(){
     
      this.$router.push({
        path: '/purchase/PurchaseList',
      })
    },
    
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    const currentValue = row["purchase.purchaseName"];
    // 获取上一行相同列的值
    const preRow = this.dataList[rowIndex - 1];
    const preValue = preRow ? preRow["purchase.purchaseName"] : null;
    if (currentValue === preValue) {
      return { rowspan: 0, colspan: 0 };
    } else {
      // 否则计算当前单元格应该跨越多少行
      let rowspan = 1;
      for (let i = rowIndex + 1; i < this.dataList.length; i++) {
        const nextRow = this.dataList[i];
        const nextValue = nextRow["purchase.purchaseName"];
        if (nextValue === currentValue) {
          rowspan++;
        } else {
          break;
        }
      }
      return { rowspan, colspan: 1 };
    }
  }



}
  }
}
</script>


<style scoped>

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .page-title {
    font-size: 16px;
    font-weight: bold;
  }

</style>
